<template>
	<!-- 添加车辆 -->
	<view class="addCar">
		<!-- <u-navbar title="添加车辆" title-color="#333" back-icon-color="#333"></u-navbar> -->
		<view class="addCar-bottom">
			<view class="tit-fp">
				<uni-title type="h1" align="center" title="发票申请"></uni-title>
			</view>

			<view class="addCar-content-box">
				<view class="userfptj-main">
					<view class="" style="text-align: center; padding: 20rpx 0;">
						<text>总额：{{ fptjobj.zxf }}</text>
					</view>
					<view class="userfptj">
						<view class="">
							<text>物料</text>
						</view>
						<view class="">
							<text>运费</text>
						</view>
					</view>
					<view class="userfptj">
						<view class="">
							<text>¥{{ fptjobj.wl }}</text>
						</view>
						<view class="">
							<text>¥{{ fptjobj.yf }}</text>
						</view>
					</view>
					<view class="userfptj">
						<view class="">
							<text>额度内已开</text>
						</view>
						<view class="">
							<text>额度外已开</text>
						</view>
					</view>
					<view class="userfptj">
						<view class="">
							<text>¥{{ fptjobj.ykpn }}</text>
						</view>
						<view class="">
							<text>¥{{ fptjobj.ykpw }}</text>
						</view>
					</view>
					<view class="userfptj">
						<view class="">
							<text>额度内可开</text>
						</view>
						<view class="">
							<text>额度外可开</text>
						</view>
					</view>
					<view class="userfptj">
						<view class="">
							<text>¥{{ fptjobj.kkpn }}</text>
						</view>
						<view class="">
							<text>¥{{ fptjobj.kkpw }}</text>
						</view>
					</view>
					<view class="" style="text-align: center; color:red; padding: 20rpx 0;">
						<text>{{ fptjobj.remark }}</text>
					</view>
				</view>

				<view class="addCar-carName-phone" style="position: relative;border-bottom: 1px solid rgba(230, 230, 230, 1);">
					<text class="addCar-phone">名称：</text>
					<input class="addCar-input-one" @focus='gsmsgjsFun' @input="gsmsgjsFun" type="text" placeholder="抬头名称"
						v-model="obj.unitName" />

					<view v-if="gsmsgtf">
						<view class="gsmsg-slect-main">
							<view class="gsmsgclos">
								<u-icon @click="closgsmsg" name="close" color="#606266" size="40"></u-icon>
							</view>

							<view class="slot-content" style="background-color: #FFFFFF;">
								<scroll-view scroll-y="true" style="height:600rpx;">
									<view class="u-text-center bor-but u-content-color u-m-t-20 u-m-b-20" @click='gsmsgitemFun(item)'
										v-for="(item, index) in listgsmsg">
										<view class="unitName">
											<text>{{ item.unitName }}</text>
										</view>
										<view class="unitTaxNo">
											<text>税号：{{ formatTaxNo(item.unitTaxNo) }}</text>
										</view>
									</view>
								</scroll-view>
							</view>
						</view>
					</view>

				</view>
				<view class="add-phone-main">
					<view class="addCar-carName-phone">
						<text class="addCar-phone">税号：</text>
						<input class="addCar-input-one" type="text" placeholder="纳税人识别号" v-model="formattedUnitTaxNo"
							@input="updateUnitTaxNo" />
					</view>
				</view>
				<view class="addCar-carName-phone">
					<text class="addCar-phone">单位地址：</text>
					<input class="addCar-input-one" type="text" placeholder="公司地址(选填)" v-model="obj.unitAddress" />
				</view>
				<view class="addCar-carName-phone">
					<text class="addCar-phone">电话号码：</text>
					<input class="addCar-input-one" type="tel" maxlength="11" placeholder="公司电话(选填)" v-model="obj.unitPhone" />
				</view>
				<view class="addCar-carName-phone">
					<text class="addCar-phone">开户银行：</text>
					<input class="addCar-input-one" type="text" placeholder="开户银行" v-model="obj.bankName" />
				</view>
				<view class="addCar-carName-phone">
					<text class="addCar-phone">银行账户：</text>
					<input class="addCar-input-one" type="text" placeholder="银行专户" v-model="obj.bankNo" />
				</view>
				<view class="addCar-carName-phone">
					<text class="addCar-phone">申请金额：</text>
					<input class="addCar-input-one" type="text" placeholder="申请金额" v-model="fpsqje" />
				</view>
				<view class="addCar-carName-phone" style="display: flex;justify-content: space-between;">
					<view class="">
						<text class="addCar-phone">申请类型：</text>

					</view>
					<view class="" style="width:50%;">
						<u-radio-group size="40" v-model="value" width="50%" @change="radioGroupChange">
							<u-radio style="padding-bottom: 10rpx;" v-for="(item, index) in list" :key="index" :name="item.name">
								{{ item.name }}
							</u-radio>
						</u-radio-group>
					</view>
				</view>
			</view>
			<view class="addCar-reset-determine">
				<view class="addCar-determine" @click="determine">提交申请</view>
			</view>
		</view>
		<u-modal v-model="addCarLoginShow" content="确认提交该发票申请？" :show-cancel-button="true" @confirm="addCarConfirm">
		</u-modal>
		<u-keyboard ref="uKeyboard" mode="card" @change="carValChange" :autoChange="isChange" @backspace="carBackspace"
			v-model="carshow" :mask="false"></u-keyboard>
	</view>
</template>

<script>

export default {
	data() {
		return {
			userinfo: JSON.parse(uni.getStorageSync('userinfo')),
			componeryArr: [],
			addressNew: null,
			Index: 0,
			diasabledInput: true, //可读不可写
			carNumberIpt: '', //车牌号
			nameIpt: '', //车主姓名
			phoneIpt: '', //联系方式
			tareIpt: '', //联系方式
			addCarLoginShow: false,
			carshow: false,
			carType: '',
			isChange: false, //是否改变为英文
			list: [{
				phone: ''
			}],
			obj: {
				unitName: '',
				unitTaxNo: '',
				unitAddress: '',
				unitPhone: '',
				bankName: '',
				bankNo: ''
			},
			fptjobj: {

			},
			fpsqje: '',
			listgsmsg: [],
			gsmsgtf: false,
			list: [{
				name: '额度内',
				value: 1
			},
			{
				name: '额度外'
			}
			],
			// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
			value: '额度内',
			fpsqlx: '1'
		}
	},
	onLoad() {
		this.fptj()
	},
	computed: {
		formattedUnitTaxNo: {
			get() {
				return this.formatTaxNo(this.obj.unitTaxNo)
			},
			set(value) {
				// 去掉空格并更新 `unitTaxNo`
				this.obj.unitTaxNo = value.replace(/\s+/g, '');
			}
		}
	},
	methods: {
		updateUnitTaxNo(event) {
			// console.log('event', event);
			const value = event.target.value;
			this.obj.unitTaxNo = value.replace(/\s+/g, ''); // 去除空格
		},
		formatTaxNo(val) {
			return val ? val.replace(/(.{4})(?=.)/g, '\$1 ') : '';
		},
		fptj() {
			uni.showLoading({
				title: '加载中...',
				mask: true
			});
			if (this.userinfo.sign == 'CUS-1') {
				var ORMTB400ID = this.userinfo.ORMTB400ID
			} else if (this.userinfo.sign == 'CUS-2' || this.userinfo.sign == 'CUS-3') {
				var ORMTB400ID = this.userinfo.ORMTB410ID
			}
			uni.request({
				url: this.baseUrl + '/set/settb410/selectKPData',
				method: 'POST',
				dataType: 'json',
				data: {
					ORMTB410ID: ORMTB400ID
				},
				success: (res) => {
					uni.hideLoading();
					console.log(res);
					if (res.data.code == 200) {
						this.fptjobj = res.data.data
					} else {
						uni.showToast({
							title: res.data.message,
							duration: 5000,
							icon: 'none',
						});
					}
				},
				fail: (res) => {
					uni.hideLoading();
					uni.showToast({
						title: res.data.message,
						duration: 5000,
						icon: 'none',
					});
				}
			});
		},
		// 选中任一radio时，由radio-group触发
		radioGroupChange(e) {
			if (e == '额度内') {
				this.fpsqlx = 1
			}
			if (e == '额度外') {
				this.fpsqlx = 2
			}
			console.log(e);
		},
		gsmsgjsFun() {
			this.gsmsgque()
		},
		closgsmsg() {
			this.gsmsgtf = false;
		},
		gsmsgitemFun(item) {
			console.log(item)
			this.gsmsgtf = false;
			this.obj = item
			this.formattedUnitTaxNo = item.unitTaxNo
		},
		gsmsgque() {
			uni.showLoading({
				title: '加载中...',
				mask: true
			});
			if (this.userinfo.sign == 'CUS-1') {
				var ORMTB400ID = this.userinfo.ORMTB400ID
			} else if (this.userinfo.sign == 'CUS-2' || this.userinfo.sign == 'CUS-3') {
				var ORMTB400ID = this.userinfo.ORMTB410ID
			}
			uni.request({
				url: this.baseUrl + '/set/settb416/checkInvoice',
				method: 'POST',
				dataType: 'json',
				data: {
					SETTB410CA00: ORMTB400ID,
					SETTB410CA03: this.obj.unitName
				},
				success: (res) => {
					uni.hideLoading();
					if (res.data.code == 200) {
						this.listgsmsg = res.data.data
						if (this.listgsmsg.length > 0) {
							this.gsmsgtf = true;
						} else {
							this.gsmsgtf = false;
						}
					} else {
						uni.showToast({
							title: res.data.message,
							duration: 5000,
							icon: 'none',
						});
					}
				},
				fail: (res) => {
					uni.hideLoading();
					uni.showToast({
						title: res.data.message,
						duration: 5000,
						icon: 'none',
					});
				}
			});
		},
		carValChange(val) {
			// 将每次按键的值拼接到carNumberIpt变量中，注意+=写法
			this.carNumberIpt += val;
			if (this.carNumberIpt.length == 0) {
				this.isChange = true;
			} else {
				this.isChange = false;
			}
		},
		carBackspace() {
			// 删除carNumberIpt的最后一个字符
			if (this.carNumberIpt.length) this.carNumberIpt = this.carNumberIpt.substr(0, this.carNumberIpt.length -
				1);
		},
		boardClick() {
			this.carshow = true
		},
		tareIptInput() { //限制验证码长度
			if (this.tareIpt.length > 6) {
				this.tareIpt = this.tareIpt.slice(0, 6)
			}
		},
		phoneIptInput() {
			if (this.phoneIpt.length > 11) {
				this.phoneIpt = this.phoneIpt.slice(0, 11)
			}
		},
		// 确定
		determine() {
			if (!this.obj.unitName) {
				return uni.showToast({
					title: '请输入单位名称',
					duration: 5000,
					icon: 'none',
				});
			}
			if (!this.formattedUnitTaxNo) {
				return uni.showToast({
					title: '请输入税号',
					duration: 5000,
					icon: 'none',
				});
			}
			if (!this.obj.bankName) {
				return uni.showToast({
					title: '请输入开户行',
					duration: 5000,
					icon: 'none',
				});
			}
			if (!this.obj.bankNo) {
				return uni.showToast({
					title: '请输入账户',
					duration: 5000,
					icon: 'none',
				});
			}
			if (!this.fpsqje) {
				return uni.showToast({
					title: '请输入申请金额',
					duration: 5000,
					icon: 'none',
				});
			}
			this.addCarLoginShow = true
		},
		addCarConfirm() {
			var id = ''
			if (this.userinfo.sign == 'CUS-1') {
				id = this.userinfo.ORMTB400ID
			} else if (this.userinfo.sign == 'CUS-2' || this.userinfo.sign == 'CUS-3') {
				id = this.userinfo.ORMTB410ID
			}
			uni.request({
				url: this.baseUrl + '/set/settb410Entity/settb410Add',
				method: 'POST',
				dataType: 'json',
				data: {
					SETTB410CA03: this.obj.unitName,
					SETTB410CA04: this.obj.unitTaxNo,
					SETTB410CA16: this.obj.unitAddress,
					SETTB410CA02: this.obj.unitPhone,
					SETTB410CA15: this.obj.bankName,
					SETTB410CA05: this.obj.bankNo,
					SETTB410CA18: this.fpsqje,
					SETTB410CA08: this.fpsqlx,
					SETTB410CA00: id
				},
				success: (res) => {
					console.log(res);
					if (res.data.code == 200) {
						uni.showToast({
							title: '提交成功',
							duration: 5000,
							icon: 'none',
						});
						uni.navigateBack()
					} else {
						uni.showToast({
							title: res.data.message,
							duration: 5000,
							icon: 'none',
						});
					}
				},
				fail: (res) => {
					uni.showToast({
						title: res.data.message,
						duration: 5000,
						icon: 'none',
					});
				}
			});
		},
	}
}
</script>

<style scoped>
.addCar input {
	border: 0;
}

.addCar {
	width: 100%;
	min-height: 100vh;
	background-color: rgba(242, 242, 242, 1);
	overflow: hidden;
}

/* 列表 */

/* 内容 */
.addCar-content-box {
	width: 100%;
	background: rgba(255, 255, 255, 1);
	padding: 0 24rpx;
}

.addCar-carName-phone {
	border-bottom: 2rpx solid rgba(230, 230, 230, 1);
	padding: 30rpx 0;
}

.addCar-input-one {
	width: 410rpx !important;
	display: inline-block;
	margin-bottom: 0 !important;
	padding: 0 !important;
	height: 44rpx !important;
	vertical-align: middle;
	/* margin-left: 0.1rem; */
	color: rgba(51, 51, 51, 1);
	/* font-size: 28rpx; */
	text-align: center;
}

.addCar-phone {
	width: 190rpx;
	display: inline-block;
	/* font-size: 30rpx; */
	/* color: rgba(102, 102, 102, 1); */
	vertical-align: middle;
	/* background: #000000; */
}

.addCar-phone-placeholder {
	font-size: 30rpx;
	color: rgba(102, 102, 102, .5);
}

.addCar-dun {
	color: rgba(51, 51, 51, 1);
	font-size: 30rpx;
}

/* 按钮 */
.addCar-reset-determine {
	margin-top: 167rpx;
	padding-bottom: 20rpx;
	/* display: flex; */
	/* justify-content: center; */
}



.addCar-reset-determine>view {
	width: 350rpx;
	text-align: center;
	line-height: 80rpx;
	background-color: #19be6b;
	color: #fff;
	font-size: 36rpx;
	margin: 0 auto;
	border-radius: 10rpx;

}

.addCar-reset {
	width: 159rpx;
	background: rgba(234, 197, 15, 1);
	text-align: center;
	/* margin-left: 170rpx; */
	margin: 0 20rpx;
}

.addCar-determine {
	background: rgba(0, 161, 244, 1);
	/* margin-left: 60rpx; */
}

.add-phone-main {
	position: relative;
}

.add-phone {
	position: absolute;
	top: 20rpx;
	right: 0;
	/* font-size: 50rpx; */
	color: rgba(0, 255, 127, 1);
	/* background: rgba(0, 255, 127, 1); */

}

.addCar-phone-car {
	display: inline-block;
	width: 310rpx;
	height: 44rpx;
	line-height: 44rpx;
	/* border: 1px solid rgba(0, 0, 0, .2); */
	/* border-radius: 3px; */
	text-align: center;
	vertical-align: middle;
	font-size: 30rpx;
}

input::placeholder {
	color: rgba(102, 102, 102, .5);
}



.tit-fp {
	background-color: #fff;
	/* border-bottom: 2rpx solid rgba(230, 230, 230, 1); */
	padding-bottom: 40rpx;
}

.gsmsg-slect-main {
	position: absolute;
	width: 100%;
	background: #fff;
	border-radius: 20rpx;
	box-shadow: 4rpx 4rpx 10rpx 4rpx rgb(0 0 0 / 50%);
	z-index: 999;
	padding-top: 20rpx;
	padding-bottom: 20rpx;
	top: 132rpx;


}

.bor-but {
	border-bottom: 2rpx solid #e5e5e5;
}

.gsmsgclos {
	display: flex;
	justify-content: space-between;
	padding: 20rpx;
}

.triangle-down {
	width: 0;
	height: 0;
	border-left: 20rpx solid transparent;
	border-right: 20rpx solid transparent;
	border-top: 20rpx solid black;
	/* 这里的颜色可以根据需要修改 */
}

.unitTaxNo {
	color: rgba(153, 153, 153, 1);
	line-height: 70rpx;
}

.userfptj-main {
	font-size: 32rpx;
	border-bottom: 1px solid #eee;
	background: #fff;
	border-radius: 20rpx;
	box-shadow: 2rpx 2rpx 10rpx 2rpx rgb(0 0 0 / 30%);
	margin-bottom: 40rpx;

}

.userfptj {
	display: flex;
	justify-content: space-between;
	padding: 10rpx;
}
</style>
